<template>
  <view class="account-login">
    <!-- 手机号登录 -- 表单 -->
    <view class="login-form">
      <!-- 手机号 -->
      <view class="form-item">
        <input class="form-item--input" type="number" v-model="mobile" maxlength="11" placeholder="请输入手机号码" />
      </view>
	  
	  <view class="form-item">
	    <input class="form-item--input" placeholder="请输入密码" :password="showPassword" v-model="password" />
	    <uni-icons type="eye-filled" size="24" class="uni-icon" :color="!showPassword ? '#fa2209' : ''" @click="changePassword"></uni-icons>
	  </view>
      <!-- 图形验证码 -->
<!--      <view class="form-item">
        <input class="form-item--input" type="text" v-model="captchaCode" maxlength="5" placeholder="请输入图形验证码" />
        <view class="form-item--parts">
          <view class="captcha" @click="getCaptcha()">
            <image class="image" :src="captcha.base64"></image>
          </view>
        </view>
      </view> -->

      <!-- 登录按钮 -->
      <view class="login-button" :class="{ disabled }" @click="handleLogin()">
        <text>登录</text>
      </view>
	
	  <view class="form-item-code">
	  	 <view @click="goCodeLogin">验证码登录</view>
	  </view>
    </view>
  </view>
</template>

<script>
  import store from '@/store'
  import * as CaptchaApi from '@/api/captcha'
  import * as Verify from '@/utils/verify'
  
  // 倒计时时长(秒)
  const times = 60

  // 表单验证场景
  const GET_CAPTCHA = 10
  const SUBMIT_LOGIN = 20

  export default {
    components: {
    },

    props: {
      // 是否存在第三方用户信息
      isParty: {
        type: Boolean,
        default: () => false
      },
      // 第三方用户信息数据
      partyData: {
        type: Object
      },
    },

    data() {
      return {
        // 正在加载
        isLoading: false,
        // 按钮禁用
        disabled: false,
        // 图形验证码信息
        captcha: {},
        // 短信验证码发送状态
        smsState: false,
        // 倒计时
        times,
        // 手机号
        mobile: '',
		 // 密码
		password: '',
		showPassword: true,
        // 图形验证码
        captchaCode: '',
        // 短信验证码
        smsCode: ''
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    created() {
      // 获取图形验证码
      // this.getCaptcha()
    },

    methods: {
	  // 密码显示或隐藏
	  changePassword: function() {
	  	this.showPassword = !this.showPassword;
	  },
      // 获取图形验证码
      getCaptcha() {
        const app = this
        CaptchaApi.image()
          .then(result => app.captcha = result.data)
      },
      // 表单验证
      formValidation(scene = GET_CAPTCHA) {
        const app = this
        // 验证获取短信验证码
        if (scene === GET_CAPTCHA) {
          if (!app.validteMobile(app.mobile)) {
            return false
          }
        }
        // 验证提交登录
        if (scene === SUBMIT_LOGIN) {
			if (!app.validteMobile(app.mobile)) {
			   return false
			}
        }
        return true
      },
      // 验证手机号
      validteMobile(str) {
        if (Verify.isEmpty(str)) {
          this.$toast('请先输入手机号')
          return false
        }
        if (!Verify.isMobile(str)) {
          this.$toast('请输入正确格式的手机号')
          return false
        }
        return true
      },

      // 验证图形验证码
      validteCaptchaCode(str) {
        if (Verify.isEmpty(str)) {
          this.$toast('请先输入图形验证码')
          return false
        }
        return true
      },

      // 点击手机号登录--h5
      handleLogin() {
        const app = this
        if (!app.isLoading && !app.disabled && app.formValidation(SUBMIT_LOGIN)) {
          app.submitLogin()
        }
      },

      // 确认登录
      submitLogin() {
        const app = this
        app.isLoading = true
        app.disabled = true
        store.dispatch('Login', {
            mobile: app.mobile,
            password: app.password
          })
          .then(result => {
            // 显示登录成功
            app.$toast('登录成功')
            // 相应全局事件订阅: 刷新上级页面数据
            uni.$emit('syncRefresh', true)
			// 登陆后连接websocket
			app.$nextTick(() => {
				app.getUserInfo()
				store.dispatch('connectSocket', 'U')
			})
            // 跳转回原页面
            setTimeout(() => app.onNavigateBack(1), 2000)
          })
          .catch(err => {
            app.disabled = false
            // 跳转回原页面
            if (err.result.data.isBack) {
              setTimeout(() => app.onNavigateBack(1), 2000)
            }
          })
          .finally(() => app.isLoading = false)
      },
	
	  // 获取用户信息
	  getUserInfo() {
		store.dispatch('GetUserInfo').then(result => {
			console.log(result, 'GetUserInfo')
		}).catch(err => {
			console.log(err, 'err')
		})
	  },
      /**
       * 登录成功-跳转回原页面
       */
      onNavigateBack(delta = 1) {
        const pages = getCurrentPages()
		// const prevPage = pages[pages.length - 2]; // 上一页实例
		const prevPage = pages[0]; // 上一页实例
		console.log(pages)
        if (pages.length > 1) {
   //        uni.navigateBack({
   //          delta: Number(delta || 1),
			// success: function() {
			// 	// prevPage.$vm.refreshData(); // 执行前一个页面的刷新
			// }
   //        })	13457484645
          if(prevPage.options && prevPage.options.id) {
			  this.$navTo(prevPage.route+'?id='+ prevPage.options.id)
		  } else {
			  this.$navTo(prevPage.route)
		  }
        } else {
          this.$navTo('pages/index/index')
        }
      },
	  //验证码登录
	  goCodeLogin() {
		  // this.$navTo('pages/login/code-login')
		  this.$emit('loginMethodChange', 'codeLogin')
	  }

    }
  }
</script>

<style lang="scss" scoped>
  .account-login {
    min-height: 100vh;
    background-color: #fff;
  }

  // 页面头部
  .header {
    margin-bottom: 60rpx;

    .title {
      color: #191919;
      font-size: 54rpx;
    }

    .sub-title {
      margin-top: 20rpx;
      color: #b3b3b3;
      font-size: 28rpx;
    }
  }

  // 输入框元素
  .form-item {
    display: flex;
    align-items: center;
    padding: 18rpx;
    border-bottom: 1rpx solid #f3f1f2;
    margin-bottom: 30rpx;
    height: 96rpx;

    &--input {
      font-size: 28rpx;
      letter-spacing: 1rpx;
      flex: 1;
      height: 100%;
    }

    &--parts {
      min-width: 100rpx;
    }

    // 图形验证码
    .captcha {
      height: 60rpx;

      .image {
        display: block;
        width: 192rpx;
        height: 100%;
      }
    }

    // 短信验证码
    .captcha-sms {
      font-size: 28rpx;
      line-height: 50rpx;
      padding-right: 20rpx;

      .activate {
        color: $main-bg;
      }

      .un-activate {
        color: #9e9e9e;
      }
    }
  }
  .form-item-code{
	  text-align: right;
	  color: $main-bg;
	  margin-top: 40rpx;
  }

  // 登录按钮
  .login-button {
    width: 100%;
    height: 86rpx;
    margin-top: 80rpx;
    background: linear-gradient(to right, $main-bg, $main-bg2);
    color: $main-text;
    border-radius: 80rpx;
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
    letter-spacing: 5rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    // 禁用按钮
    &.disabled {
      opacity: 0.6;
    }
  }
</style>